<template>
  <view class="page">
    <nav-bar :left="true">
      <template #title>
        {{ "首页" }}
      </template>
    </nav-bar>
    <view class="container">
      <!-- 轮播图 -->
      <view class="my-banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in bannerList" :key="item">
            <image
              style="width: 100%; height: 142px"
              :src="toCaseImg(item)"
              mode="widthFix"
            />
          </van-swipe-item>
        </van-swipe>
      </view>
      <view class="more-btn">
        <view class="more-btn-left">消息中心</view>
        <view class="more-btn-right" @click="handleToMsg">
          查看更多
          <van-icon size="14" name="arrow" />
        </view>
      </view>
      <!-- 列表 -->
      <view class="my-list">
        <AvanList />
      </view>
    </view>
    <tab-bar :currentTab="currentTab" :tabs="tabs"></tab-bar>
  </view>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
const currentTab = ref(0);
const tabs = proxy.menuTabs();

const bannerList = computed(() => {
  return ["banner-1", "banner-2", "banner-3"];
});

onMounted(() => {

});

function handleToMsg() {
  navigate("navigateTo", "toMsg");
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: calc(100% - 96px);
  .my-banner {
    width: 100%;
    height: 142px;
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      height: 142px;
      line-height: 142px;
      text-align: center;
    }
  }
  .more-btn {
    width: 100%;
    height: 30px;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    &-left {
      display: flex;
      align-items: center;
      font-size: 15px;
      color: #333;
      font-weight: 600;
      &::before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 14px;
        background-color: #1989fa;
        margin-right: 8px;
      }
    }
    &-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
  .my-list {
    margin-top: 2px;
    width: 100%;
    height: calc(100% - 174px);
  }
}
</style>
